import './App.css'
import { Outlet, useNavigate } from 'react-router-dom'
import axios from 'axios'
import { useEffect } from 'react'
import { Button } from 'antd';

function App() {
  const navigate = useNavigate()

  useEffect(() => {
    axios.get('/api/article/list')
  }, [])

  return (
    <div className='bg-red-400 w-full h-[40px]'>
      <p style={{ display: "flex", justifyContent: 'space-around',alignItems:"center",margin:"10px" }}>
        <Button onClick={() => navigate('/home')} color="primary" variant="solid">
          首页
        </Button>
        <span> | </span>
        <Button onClick={() => navigate('/sou')} color="danger" variant="solid">
          热搜
        </Button>
        <span> | </span>
        <Button onClick={() => navigate('/shuo')} color="pink" variant="solid">
          小说
        </Button>
        <span> | </span>
        <Button onClick={() => navigate('/dian')} color="purple" variant="solid">
          电影
        </Button>
        <span> | </span>
        <Button onClick={() => navigate('/ju')} color="cyan" variant="solid">
          电视剧
        </Button>
      </p>
      <Outlet></Outlet>
    </div>
  )
}

export default App
